<template>
  <div class="seven_day">

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getPastSevenDaysSales
} from '@/api/echart'

export default {
  name: 'SevenDay',
  data() {
    return {
      sevenData: [],
      dateData: [],
      valueData: []
    }
  },
  mounted() {
    this.getSevenDayDate()
  },
  methods: {
    //获取近七天成交量
    getSevenDayDate() {
      getPastSevenDaysSales().then(res => {
        this.sevenData = res.data
        this.setChart()
      })
    },

    //分割日期和销售额
    extractValue() {
      this.dateData = this.sevenData.map(item => {
        return item.days
      })
      this.valueData = this.sevenData.map(item => {
        return item.tprice
      })
    },

    //设置折线图
    setChart() {
      this.extractValue()
      let chartDom = document.querySelector('.bottom_box')
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '近七天销售额',
          left: 'center',
          top: '5%'
        },
        xAxis: {
          type: 'category',
          data: this.dateData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.valueData,
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          }
        }]
      }
      myChart.setOption(option)
    }
  }

}
</script>

<style>
</style>
